<template>
  <!-- 异常登记 -->
  <div class="container">
    <el-card class="box-card" :body-style="{ padding: 10 }" v-if="activeName == 'box'">
      <el-form :inline="true" :model="boxQueryParam" class="demo-form-inline" size="medium">
        <el-form-item label="盒号/盒名">
          <el-input v-model="boxQueryParam.boxNoOrName" placeholder="请输入盒号或盒名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="boxOnSubmit">查询</el-button>
          <el-button @click="boxRest">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd('box')">添加到登记列表</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-else>
      <el-form :inline="true" :model="archiveQueryParam" class="demo-form-inline" size="medium">
        <el-form-item label="档号/题名">
          <el-input v-model="archiveQueryParam.archiveNoOrName" placeholder="请输入档号或题名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="archiveOnSubmit">查询</el-button>
          <el-button @click="archiveRest">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd('archive')">添加到登记列表</el-button>
        </el-form-item>
      </el-form>
      <!-- </el-col> -->
      <el-row :gutter="24">
        <el-col :span="24"> </el-col>
      </el-row>
    </el-card>
    <el-tabs v-model="activeName" tab-position="left" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="盒登记" name="box">
        <el-card class="box-card" :body-style="{ padding: 10 }">
          <el-table :data="boxTableData" border style="width: 100%" height="55vh" ref="boxtable"
            @selection-change="boxSelectionChange">
            <template slot="empty">
              <span style="color: #969799;">请将档案盒下架</span>
            </template>
            <el-table-column type="selection" width="55" align="center" sortable> </el-table-column>
            <el-table-column v-for="item of boxTableProps" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width">
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="档案登记" name="archive">
        <el-card class="box-card" :body-style="{ padding: 10 }">
          <el-table :data="archiveTableData" border style="width: 100%" height="55vh" ref="archivetable"
            @selection-change="archiveSelectionChange">
            <template slot="empty">
              <span style="color: #969799;">请将档案下架</span>
            </template>
            <el-table-column type="selection" width="55" align="center" sortable> </el-table-column>
            <el-table-column v-for="item of archiveTableProps" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width">
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-if="activeName == 'box'">
      <pagination ref="boxpagination" :totalCount="boxTotalCount" @pagination="boxPagination"></pagination>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-else>
      <pagination ref="archivepagination" :totalCount="archiveTotalCount" @pagination="archivePagination"></pagination>
    </el-card>
    <record-bill-dialog ref="recordBillDialog" @ok="loadData"></record-bill-dialog>
  </div>
</template>

<script>
import { downBoxPage, downArchivesPage } from '@/api/rfid/label'
import recordBillDialog from './dialog/recordBillDialog.vue'
export default {
  name: 'recordBill',
  components: { recordBillDialog },
  data() {
    return {
      activeName: 'box',
      boxTotalCount: 0,
      //查询条件
      boxSearchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      boxQueryParam: {},
      boxTableData: [],
      boxTableProps: [
        { title: '盒号', prop: 'boxNo', width: '', checked: true },
        { title: '盒名', prop: 'boxName', width: '', checked: true },
        { title: 'RFID', prop: 'rfid', width: '', checked: true },
      ],
      boxSelectionData: [],
      // ============
      archiveTotalCount: 0,
      //查询条件
      archiveSearchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      archiveQueryParam: {},
      archiveTableData: [],
      archiveTableProps: [
        { title: '档号', prop: 'archiveNo', width: '', checked: true },
        { title: '题名', prop: 'archiveName', width: '', checked: true },
        { title: 'RFID', prop: 'rfid', width: '', checked: true },
      ],
      archiveSelectionData: [],
    }
  },
  mounted() {
    this.boxLoadData()
    this.archiveLoadData()
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === 'archive') {
        this.archiveTableData = []
        this.archiveLoadData()
      } else if (tab.name === 'box') {
        this.boxTableData = []
        this.boxLoadData()
      }
    },
    handleAdd(type) {
      if (type === 'box') {
        if (this.boxSelectionData.length === 0) {
          this.$message.warning('请选择要登记的档案盒')
          return
        }
        this.$refs.recordBillDialog.add(this.boxSelectionData, 'box')
      } else if (type === 'archive') {
        if (this.archiveSelectionData.length === 0) {
          this.$message.warning('请选择要登记的档案')
          return
        }
        this.$refs.recordBillDialog.add(this.archiveSelectionData, 'archive')
      }
    },
    loadData(type) {
      if (type === 'box') {
        this.boxLoadData()
      } else if (type === 'archive') {
        this.archiveLoadData()
      }
    },
    // ===================================档案盒===================================
    boxOnSubmit() {
      this.$refs.boxpagination.resetPagination()
    },
    boxRest() {
      this.boxQueryParam = {}
      this.$refs.boxpagination.resetPagination()
    },
    boxLoadData() {
      var param = Object.assign(this.boxQueryParam, this.boxSearchModel)
      downBoxPage(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.boxTableData = res.data.data.records
            this.boxTotalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    boxPagination(val) {
      this.boxSearchModel.pageNo = val.page
      this.boxSearchModel.pageSize = val.limit
      this.boxLoadData()
    },
    boxSelectionChange(val) {
      this.boxSelectionData = val
    },
    // ===================================档案===================================
    archiveOnSubmit() {
      this.$refs.archivepagination.resetPagination()
    },
    archiveRest() {
      this.archiveQueryParam = {}
      this.$refs.archivepagination.resetPagination()
    },
    archiveLoadData() {
      var param = Object.assign(this.archiveQueryParam, this.archiveSearchModel)
      downArchivesPage(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.archiveTableData = res.data.data.records
            this.archiveTotalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    archivePagination(val) {
      this.archiveSearchModel.pageNo = val.page
      this.archiveSearchModel.pageSize = val.limit
      this.archiveLoadData()
    },
    archiveSelectionChange(val) {
      this.archiveSelectionData = val
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/style/tabs.less';

.el-tabs__item {
  height: 50%;
}

.el-tabs__header {
  height: 60vh !important;
}

.el-form-item {
  margin-bottom: 0 !important;
}
</style>
